
<div class="poster theme-default">
        <div id="slider" class="nivoSlider">
        <?php foreach ($this->imgs as $img):?>
            <a href="" class="imageLink">
            <img src="<?php echo $img?>" alt="" title="" style="width: 100%;height:230px; border:0px;">
            </a>
		<?php endforeach;?>
             <div class="center">
             <?php for($i=1; $i<=count($this->imgs);$i++){?>
	             <a class="img-control" rel="0" onclick="selectControl(this)"><?php echo $i?>
	             </a>
	          <?php }?>
             </div>
         </div>
</div>
<script>
	var time = 5000;
	function switchImage(){
		var activeImage = $(".imageLink.active").get(0);
		var index = $(".imageLink").index(activeImage);
		$($(".imageLink").get((index+1)%$(".imageLink").length)).addClass("active");
		$(activeImage).removeClass("active");
		$($(".img-control").get((index+1)%$(".img-control").length)).addClass("active");
		$($(".img-control").get(index)).removeClass("active");
		nextSlide = setTimeout(switchImage,time);
	}
	function selectControl(element){
		var index = $(".img-control").index(element);
		$(".img-control.active").removeClass("active");
		$(".imageLink.active").removeClass("active");
		$(element).addClass("active");
		$($(".imageLink").get(index)).addClass("active");
		window.clearTimeout(nextSlide);
		nextSlide = setTimeout(switchImage,time);
	}
	$(".imageLink:first").addClass("active");
	$(".img-control:first").addClass("active");
	switchImage();
</script>